<template>
  <view class="wrap">
    <image src="/src/static/images/index-bg.png" class="bagimg" />

    <view class="contnet">
      <view class="head-box">
        <view class="head-right">
          <image
            src="/src/static/images/gongg.png"
            @click="navigateTo('/pages/announcement/index')"
          />
          <image
            src="/src/static/images/kefu.png"
            @click="navigateTo('/pages/customer-service/index')"
          />
          <image
            src="/src/static/images/yinyue.png"
            v-if="isPlay"
            @click="clickPause"
            class="tingyy"
          />
          <image src="/src/static/images/yyopen.png" v-else @click="clickPlay" />
        </view>
        <view class="head-icon" v-if="userInfoFetchOk">
          <view class="head-icon-flex">
            <view class="shuijin-wrap head-box-mgr">
              <image class="image-shuijin" src="/src/static/images/small1.png" />
              <text class="shuijin-num">{{ userInfo.gold }}</text>
            </view>
            <view class="shuijin-wrap" @click="clickShare">
              <image class="image-shuijin" src="/src/static/images/small2.png" />
              <text class="shuijin-num">{{ userInfo.diamond }}</text>
              <view class="plus-icon">
                <image src="/src/static/images/plus.png" class="plus-image" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="lbhuod">
        <view
          class="dmGroup"
          v-for="(item, index) in winningList"
          :key="item.id"
          :style="`animation-delay: ${index * 1.2}s`"
        >
          <image :src="item.headimg" class="headimg" />
          <text>恭喜{{ item.phone }}即获得</text>
          <image :src="item.shopimg" class="shopimg" />
        </view>
      </view>

      <view class="burbujas">
        <view class="burul">
          <view
            class="burli"
            v-for="(item, index) in prizeList"
            :key="item.id"
            :style="`animation-delay: ${index * 2}s`"
          >
            <image :src="item.src" />
          </view>
        </view>
      </view>

      <view class="bigimg">
        <view class="arrow" @click="clickPrev">
          <image src="/src/static/images/zoujt.png" />
        </view>

        <view class="page-section-spacing">
          <swiper
            v-model:current-item-id="currentItemId"
            circular
            :indicator-dots="false"
            :autoplay="true"
            :interval="3333"
            :duration="500"
          >
            <swiper-item v-for="item in jackpotList" :key="item.id" :item-id="item.id">
              <view :style="{ backgroundImage: `url(${item.src})` }" class="swiper-item-img"></view>
              <!-- <image :src="item.src" /> -->
            </swiper-item>
          </swiper>
        </view>

        <view class="arrow dwright" @click="clickNext">
          <image src="/src/static/images/youjt.png" />
        </view>

        <view class="plinth">
          <image src="/src/static/images/bag2.png" />
        </view>
      </view>

      <view class="playjc" @click="videoShow = true">
        <image src="/src/static/images/wfjc.png" />
      </view>
      <view class="commodity">
        <swiper
          :display-multiple-items="1"
          v-model:current-item-id="currentItemId"
          circular
          :indicator-dots="false"
        >
          <swiper-item
            v-for="item in jackpotList"
            :key="item.id"
            class="everyswp"
            :item-id="item.id"
          >
            <view
              :class="['showimg', currentItemId === item.id && 'active']"
              @click="currentItemId = item.id"
            >
              <!-- <image :src="item.src" /> -->
              <view :style="{ backgroundImage: `url(${item.src})` }" class="swiper-item-img"></view>
              <view>{{ item.name }}</view>
            </view>
          </swiper-item>
        </swiper>
      </view>

      <view class="lastbtn">
        <view class="btn-share">
          <view class="tips">
            <view class="tips-content">免费</view>
            <view class="trigle">
              <u-icon name="arrow-down-fill" color="#ff5727" size="16"></u-icon>
            </view>
          </view>
          <image src="/src/static/images/4a12d57b5ea01c3def92505620f33b29.gif" @click="clickShare" />
        </view>
        <view class="btn-draw">
          <image src="/src/static/images/d2a87b21435db3e66968ec6590dfdf01.gif" @click="draw" />
          <text class="draw-num-left">({{drawNum}})</text>
        </view>
      </view>

      <view class="tips"> 谢绝给未成年人使用或在监护人的监督下使用 </view>

      <PrizePopUp ref="prizePopRef" :prizeImage="prizeImage" :prizeName="prizeName"></PrizePopUp>
    </view>
  </view>

  <u-modal
    :show="audioShow"
    title="提示"
    showCancelButton
    closeOnClickOverlay
    @close="audioShow = false"
    @cancel="audioShow = false"
    @confirm="onConfirm"
  >
    <text>是否打开音乐</text>
  </u-modal>

  <u-popup :show="videoShow" mode="center" @close="videoShow = false">
    <view class="shipin_con">
      <video :src="helpVideoUrl"> </video>
      <view class="know-btn" @click="videoShow = false"> 我知道了 </view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
  import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
  import { ref, unref } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { applyShareCodeApi, drawApi, getPrizeListApi, getUserInfoApi,checkRedeemedShareCodeApi } from '@/api/index';

  import PrizePopUp from './prize_pop_up.vue';

  const userStore = useUserStore();
  const userInfo = ref<any>({});
  const userInfoFetchOk = ref(false);

  const currentItemId = ref('1');
  const audioShow = ref(false);
  const videoShow = ref(false);

  const helpVideoUrl = ref('');

  const isPlay = ref(false);
  const audioContext = ref<any>(null);
  const currentAudio = ref<any>(null);

  const prizePopRef = ref<any>(null);
  const prizeName = ref('');
  const prizeImage = ref('');
  const drawNum = ref(0)

  const winningList = ref([
    {
      id: 1,
      headimg:
        'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJNt11LRuv4GJMTz4tiayueMorgx6HclwAcamJmj3zhdiaTBJACoow7bVmzecjHopj91AGk3Z7H5YXw/132',
      shopimg:
        'https://bl-box.oss-cn-zhangjiakou.aliyuncs.com/oss/20221206/2817e76aa571e7d5bacd5d80a8d0eaad.png',
      phone: '155****4015',
    },
    {
      id: 2,
      headimg:
        'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJNt11LRuv4GJMTz4tiayueMorgx6HclwAcamJmj3zhdiaTBJACoow7bVmzecjHopj91AGk3Z7H5YXw/132',
      shopimg:
        'https://bl-box.oss-cn-zhangjiakou.aliyuncs.com/oss/20221206/2817e76aa571e7d5bacd5d80a8d0eaad.png',
      phone: '155****4015',
    },
    {
      id: 3,
      headimg:
        'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJNt11LRuv4GJMTz4tiayueMorgx6HclwAcamJmj3zhdiaTBJACoow7bVmzecjHopj91AGk3Z7H5YXw/132',
      shopimg:
        'https://bl-box.oss-cn-zhangjiakou.aliyuncs.com/oss/20221206/2817e76aa571e7d5bacd5d80a8d0eaad.png',
      phone: '155****4015',
    },
    {
      id: 4,
      headimg:
        'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJNt11LRuv4GJMTz4tiayueMorgx6HclwAcamJmj3zhdiaTBJACoow7bVmzecjHopj91AGk3Z7H5YXw/132',
      shopimg:
        'https://bl-box.oss-cn-zhangjiakou.aliyuncs.com/oss/20221206/2817e76aa571e7d5bacd5d80a8d0eaad.png',
      phone: '155****4015',
    },
    {
      id: 5,
      headimg:
        'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJNt11LRuv4GJMTz4tiayueMorgx6HclwAcamJmj3zhdiaTBJACoow7bVmzecjHopj91AGk3Z7H5YXw/132',
      shopimg:
        'https://bl-box.oss-cn-zhangjiakou.aliyuncs.com/oss/20221206/2817e76aa571e7d5bacd5d80a8d0eaad.png',
      phone: '155****4015',
    },
    {
      id: 6,
      headimg:
        'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJNt11LRuv4GJMTz4tiayueMorgx6HclwAcamJmj3zhdiaTBJACoow7bVmzecjHopj91AGk3Z7H5YXw/132',
      shopimg:
        'https://bl-box.oss-cn-zhangjiakou.aliyuncs.com/oss/20221206/2817e76aa571e7d5bacd5d80a8d0eaad.png',
      phone: '155****4015',
    },
  ]);
  const prizeList = ref([
    {
      id: 1,
      src: 'https://bl-box.oss-cn-zhangjiakou.aliyuncs.com/oss/20221206/2817e76aa571e7d5bacd5d80a8d0eaad.png',
    },
    {
      id: 2,
      src: 'https://bl-box.oss-cn-zhangjiakou.aliyuncs.com/oss/20221206/2817e76aa571e7d5bacd5d80a8d0eaad.png',
    },
    {
      id: 3,
      src: 'https://bl-box.oss-cn-zhangjiakou.aliyuncs.com/oss/20221206/2817e76aa571e7d5bacd5d80a8d0eaad.png',
    },
    {
      id: 4,
      src: 'https://bl-box.oss-cn-zhangjiakou.aliyuncs.com/oss/20221206/2817e76aa571e7d5bacd5d80a8d0eaad.png',
    },
  ]);
  const jackpotList = ref([]) as any;

  function onConfirm() {
    clickPlay();
    audioShow.value = false;
  }
  onLoad(() => {
    audioShow.value = true;
    console.log(userStore.getConfig)
    
  });

  function setHelpVideo(){

    if(userStore.getConfig!=null){
      helpVideoUrl.value = userStore.getConfig.help_video_url;
    }
  }

  function clickPlay() {
    isPlay.value = true;

    if (audioContext.value) {
      unref(audioContext).play();
    } else {
      audioContext.value = uni.createInnerAudioContext();
      currentAudio.value = unref(audioContext).src = userStore.getConfig.site_music;
      unref(audioContext).play();
    }
  }

  function clickPause() {
    isPlay.value = false;

    if (unref(audioContext)) {
      unref(audioContext).pause();
    }
  }

  onHide(() => {
    clickPause();
  });

  function navigateTo(url) {
    uni.navigateTo({
      url,
    });
  }

  function clickPrev() {
    let index = unref(jackpotList).findIndex((item) => item.id === unref(currentItemId));
    if (!index) {
      index = unref(jackpotList).length;
    }
    currentItemId.value = unref(jackpotList).at(index - 1)!.id;
  }

  function clickNext() {
    let index = unref(jackpotList).findIndex((item) => item.id === unref(currentItemId));
    if (index === unref(jackpotList).length - 1) {
      index = -1;
    }
    currentItemId.value = unref(jackpotList).at(index + 1)!.id;
  }
  function draw() {
    if (!userStore.getToken) {
      uni.navigateTo({
        url: '/pages/login/index',
      });
    } else {
      drawApi()
        .then((res) => {
          let drawOk = false;
          if (res.code == 1) {
            //中奖弹窗
            
            prizePopRef.value.showMidPop();
            let firstWord = res.msg.indexOf('[');
            let lastWord = res.msg.lastIndexOf(']');

            if (firstWord >= 0 && lastWord >= 0 && lastWord > firstWord) {
              let resPrize = res.msg.substr(firstWord + 1, lastWord - firstWord - 1);
              let drawPrize = unref(jackpotList).find((item) => item.name === resPrize);
              if (drawPrize) {
                prizeName.value = drawPrize!.name;
                prizeImage.value = drawPrize!.src;
                drawOk = true;
                setTimeout(function () {
                  prizePopRef.value.showPrizePop();
                }, 1000);
              }
            }

            setDrawNum()
          }
          if (!drawOk) {
            setTimeout(function () {
              uni
                .showToast({
                  title: `${res.msg}`,
                  icon: 'none',
                })
                .then(() => {
                  prizePopRef.value.closeMidPop();
                });
            }, 2000);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }

  function navigateToSharePage(){
    uni.navigateTo({
      url: '/pages/submit-order/index',
    });
  }

  function clickShare() {
    if (!userStore.getToken) {
      uni.navigateTo({
        url: '/pages/login/index',
      });
      return
    }
    checkRedeemedShareCodeApi().then((res)=>{
      if (res.code == -1 || res.data.party==-1) {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
        return
      }
      if(res.data.party==0){
        applyShareCodeApi().then((res)=>{
          navigateToSharePage()
        })
        return
      }

      navigateToSharePage()
    });
    // applyShareCodeApi()
    //   .then(() => {
    //     uni.showToast({
    //       title: '分享成功',
    //       icon: 'success',
    //     });
    //   })
    //   .finally(() => {
    //     uni.navigateTo({
    //       url: '/pages/share-order/index',
    //     });
    //   });
  }

  function setDrawNum(){
    checkRedeemedShareCodeApi().then((res) => {
       if(res.code == 1){
        drawNum.value = res.data.num
       }
    })
  }

  onShow(() => {
    setDrawNum()
    setHelpVideo()
    getPrizeListApi().then((res) => {
      jackpotList.value = res.list.map((item) => ({
        id: `${item.id}`,
        src: item.images,
        name: item.title,
      }));
      prizeList.value = res.list.map((item) => ({
        id: item.id,
        src: item.images,
      }));
    });


    //获取水晶数量
    if (userStore.getToken) {
      getUserInfoApi().then((res) => {
        userInfo.value = {
          ...res,
          mobile: res.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
        };
        userInfoFetchOk.value = true;
      });
    }
  });
</script>

<style lang="less">
  .wrap {
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    height: 100%;

    .bagimg {
      width: 100%;
      height: 100%;
    }

    .contnet {
      position: absolute;
      top: 0;
      width: 100%;

      .head-box {
        display: flex;
        justify-content: space-between;
        margin: 15px 4%;

        .head-right {
          uni-image {
            width: 30px;
            height: 30px;
            margin-right: 10px;
          }

          .tingyy {
            animation: rotation 5s linear infinite;
          }
        }
        .head-icon {
          .head-icon-flex {
            display: flex;
            justify-content: space-between;
          }
          .head-box-mgr {
            margin-right: 10rpx;
          }
          .shuijin-wrap {
            border: 1px solid white;
            padding: 2px 2px;
            border-radius: 30rpx;
            display: flex;

            .image-shuijin {
              width: 25px;
              height: 25px;
            }
            .shuijin-num {
              color: white;
              display: block;
              height: 25px;
              line-height: 25px;
              padding: 0px;
              min-width: 40px;
              text-align: center;
            }
            .plus-icon {
              display: block;
              margin: 2px 5px 0 5px;
              .plus-image{
                width: 16px;
                height: 16px;
                background-color: #fff;
                border-radius: 2px;
              }
            }
          }
        }
      }

      .lbhuod {
        .dmGroup {
          position: absolute;
          top: 0;
          left: 100%;
          z-index: 999;
          -webkit-animation-timing-function: linear;
          white-space: nowrap;
          -webkit-animation-name: mymove;
          animation-name: mymove;
          width: 150px;
          height: 25px;
          border-radius: 25px;
          background: linear-gradient(270deg, hsla(0, 0%, 100%, 0), rgba(255, 237, 229, 0.3));
          animation-duration: 10s;

          .headimg {
            width: 23px;
            height: 23px;
            border-radius: 50%;
            margin: 1px;
          }

          .shopimg {
            width: 18px;
            height: 18px;
            margin: 1px 0;
            border-radius: 2px;
          }

          uni-text {
            font-size: 12px;
            color: #fff;
            margin: 0 5px 0 3px;
            white-space: nowrap;
          }

          &:nth-of-type(2n-1) {
            top: 60px;
          }

          &:nth-of-type(2n) {
            top: 100px;
          }
        }
      }

      .burbujas {
        position: absolute;
        z-index: 100;
        left: 50%;
        bottom: 56%;

        .burul {
          .burli {
            display: block;
            position: absolute;
            bottom: 0;
            height: 30px;
            width: 30px;
            background-size: 100%;
            background-size: contain;
            border-radius: 50%;
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0;

            &:nth-of-type(2n-1) {
              left: 0;
              -webkit-animation: burbujasL 4s linear infinite;
              animation: burbujasL 4s linear infinite;
            }

            &:nth-of-type(2n) {
              -webkit-animation: burbujasC 4s linear infinite;
              animation: burbujasC 4s linear infinite;
            }

            uni-image {
              position: absolute;
              left: 50%;
              top: 50%;
              -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
              width: 75%;
              height: 75%;
              border-radius: 50%;
            }
          }
        }
      }

      .bigimg {
        height: 230px;
        position: relative;

        .page-section-spacing {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 100%;
          height: 230px;
          z-index: 10;
          text-align: center;

          uni-swiper {
            height: 100% !important;
          }
          .swiper-item-img {
            margin: 0 auto;
            width: 180px;
            height: 180px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
          }
          uni-image {
            width: 230px;
            height: 100%;
          }
        }

        .arrow {
          position: absolute;
          top: 56%;
          left: 8%;
          z-index: 99;

          uni-image {
            width: 37px;
            height: 39px;
          }
        }

        .dwright {
          left: 86%;
        }
      }

      .plinth {
        position: absolute;
        text-align: center;
        width: 100%;
        top: 135px;
        left: 0px;
        z-index: 9;

        > uni-image {
          width: 76%;
          height: 158px;
        }
      }

      .playjc {
        position: absolute;
        left: 0;
        top: 44%;
        z-index: 66;

        uni-image {
          width: 30px;
          height: 86px;
        }
      }

      .mhshiwan {
        position: absolute;
        right: 3%;
        top: 55%;
        z-index: 66;

        uni-image {
          width: 40px;
          height: 42px;
        }
      }

      .commodity {
        position: relative;
        height: 111px;
        margin-top: 60px;
        z-index: 99;

        .showimg {
          width: 76px;
          height: 76px;
          background: url(/src/static/images/box.67bcaa13.png);
          background-size: 100% 100%;
          text-align: center;
          margin: 0 auto;
          padding: 10px 10px 10px 10px;
          box-sizing: border-box;
          .swiper-item-img {
            margin: 0 auto 0 auto;
            width: 45px;
            height: 45px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
          }

          uni-image {
            width: 50px;
            height: 50px;
            margin-top: -20px;
          }

          uni-view {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 13px;
            color: #ffe4ce;
            text-align: center;
            // margin-top: 8px;
            font-weight: 800;
          }
        }

        .active {
          width: 90px;
          height: 90px;
          margin-top: -7px;

          uni-image {
            width: 72px;
            height: 72px;
            margin-top: -21px;
          }

          uni-view {
            font-size: 15px;
            color: #fff;
            margin-top: 5px;
          }
        }

        uni-swiper {
          height: 100% !important;

          :deep(.uni-swiper-wrapper) {
            overflow: visible;
            padding-top: 21px;

            .uni-swiper-slides {
              inset: 0px 142px;
            }
          }

          .everyswp {
            overflow: visible;
            padding-top: 21px;
          }
        }
      }

      .lastbtn {
        text-align: center;
        margin-top: 25px;
        margin-bottom: 10px;

        .btn-share{
          width: 76px;
          display: inline-block;
          position: relative;
          uni-image {
            width: 76px;
            height: 71px;
          }
          .tips{
            position: absolute;
            left: 12px;
            top:-30px;
            .trigle{
              margin: -8px 16px;
            }
            .tips-content{
              background: #ff5727;
              color: #fff;
              padding: 4px 4px;
              border-radius: 12px;
              text-align: center;
              width: 40px;
              font-size: 14px;
            }
          }
        }
        .btn-draw{
          width: 233px;
          display: inline-block;
          margin-left: 23px;
          position: relative;
          .draw-num-left{
            position: absolute;
            left:161px;
            top: 8px;
            font-size: 20px;
            color: #fff;
          }
          uni-image {
            width: 233px;
            height: 71px;
          }
        }

        // uni-image {
        //   width: 76px;
        //   height: 71px;

        //   &:last-of-type {
        //     width: 233px;
        //     height: 71px;
        //     margin-left: 23px;
        //   }
        // }
      }

      .tips {
        font-size: 11px;
        color: #ff7311;
        text-align: center;
      }
    }
  }

  .shipin_con {
    padding: 3px;

    uni-video {
      width: 300px;
      height: 225px;
      display: inline-block;
      line-height: 0;
      overflow: hidden;
      position: relative;
    }

    .know-btn {
      width: 120px;
      height: 30px;
      background: linear-gradient(270deg, #ff8361, #ff5525);
      text-align: center;
      line-height: 30px;
      border-radius: 2px;
      font-size: 14px;
      color: #fff;
      margin: 10px auto;
    }
  }

  @keyframes rotation {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(1turn);
    }
  }

  @keyframes mymove {
    0% {
      left: 100%;
    }

    100% {
      left: -100%;
    }
  }

  @keyframes burbujasL {
    0% {
      -webkit-transform: scale(1) translate(0);
      transform: scale(1) translate(0);
      bottom: 0;
      opacity: 1;
    }

    100% {
      -webkit-transform: scale(1.5) translate(-30px, -80px);
      transform: scale(1.5) translate(-30px, -80px);
      bottom: 0;
      opacity: 0;
    }
  }

  @keyframes burbujasC {
    0% {
      -webkit-transform: scale(1) translate(-20px);
      transform: scale(1) translate(-20px);
      bottom: 30px;
      opacity: 1;
    }

    100% {
      -webkit-transform: scale(1.5) translate(30px, -80px);
      transform: scale(1.5) translate(30px, -80px);
      bottom: 30px;
      opacity: 0;
    }
  }

  @media screen and (min-width: 1000px) and (max-width: 2520px) {
    .tankuangpay {
      box-sizing: border-box;
      width: 390px;
      margin: 0 auto /* 居中对齐 */;
    }
  }
</style>
